<template>
  <el-card>
    <el-row gutter="20">
      <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4" v-for="(order, index) in tableData" :key="index">
        <div class="table-item">
          <div class="t-no">{{ index + 1 }}<span>号桌</span></div>
          <div class="t-content">
            <div class="people_num">人数：{{ order.number_of_diners }}</div>
            <div class="sett_amount">金额：{{ order.sett_amount }}</div>
            <div class="sett_amount">
              时间：{{ dayjs(order.updated_time).format("HH:ss") }}
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </el-card>
  <el-dialog
    title="新增菜品分类"
    v-model="dialogVisible"
    width="20%"
    center
    :before-close="handleClose"
  >
    <div class="dialog-content">
      <el-input placeholder="请输入名称" v-model="categoryForm.name"></el-input>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCategory">确 定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import { orderList } from "@/network/product";
import dayjs from "dayjs";
const currentRow = ref(null);
const tableData = ref([]);

const dialogVisible = ref(false);
const categoryForm = ref({ name: "" });

onMounted(() => {
  loadOrders();
});
const formatTime = (row, column, cellValue, index) => {
  // return col;
  return dayjs(cellValue).format("YYYY-MM-DD HH:ss");
};
const loadOrders = () => {
  orderList({}).then((list) => {
    tableData.value = list.data;
  });
};

const handleOpen = () => {
  dialogVisible.value = true;
};

const handleClose = () => {
  dialogVisible.value = false;
};

const handleEdit = (index, row) => {};

const handleDelete = (index, row) => {};

const setCurrent = (row) => {
  // singleTable.setCurrentRow(row);
};

const handleCurrentChange = (val) => {
  currentRow.value = val;
};
</script>

<style scoped>
.table-item {
  width: 100%;
  height: 180px;
  background-color: #337ecc;
  margin-bottom: 20px;
  border-radius: 6px;
  position: relative;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
  display: flex;
  border: 10px solid #337ecc;
}

.table-item:hover {
  transform: scale(1.01);
  border: 10px solid #ffd04b;
}

.t-no {
  position: absolute;
  right: 10px;
  bottom: -10px;
  color: #ffd04b;
  font-size: 60px;
  opacity: 0.2;
}

.t-content {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 20px 60px;
  box-sizing: border-box;
  color: #fff;
  font-size: 20px;
}
.dialog-content {
  margin-bottom: 40px;
  text-align: center;
}

.dialog-footer {
  margin-top: 40px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.filter-wrapper {
  padding-bottom: 20px;
  box-sizing: border-box;
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #545c64;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>